<template>

  <div class="page-indicator">
    <h1 class="page-title">Indicator</h1>
    <div class="page-indicator-wrapper">
      <mt-button @click.native="openIndicator" size="large">点击弹出 Indicator</mt-button>
      <mt-button @click.native="openIndicatorWithSpinner" size="large">可配置 spinner</mt-button>
      <mt-button @click.native="openIndicatorWithText" size="large">点击弹出带有文字的 Indicator</mt-button>
    </div>
  </div>

</template>

<script type="text/ecmascript-6">

  import Vue from 'vue';

  import Indicators from 'mint-ui/lib/indicator';
  import 'mint-ui/lib/indicator/style.css';

  import Button from 'mint-ui/lib/button';
  import 'mint-ui/lib/button/style.css';

  Vue.use(Indicators)
  Vue.component(Button.name,Button)

    export default {

      methods: {
        openIndicator() {
          Indicators.open();
          setTimeout(() => Indicators.close(), 2000);
        },

        openIndicatorWithSpinner() {
          Indicators.open({ spinnerType: 'fading-circle' });
          setTimeout(() => Indicators.close(), 2000);
        },

        openIndicatorWithText() {
          Indicators.open('加载中...');
          setTimeout(() => Indicators.close(), 2000);
        }
      },

      beforeDestroy() {
        Indicators.close();
      }

    }
</script>
